<template>
  <transition name="slide">
    <music-list :tracks="tracks" :listName="listName" :copywriter="copywriter" :picUrl="picUrl" :name="name" ref="songList" :creator="creator"></music-list>
  </transition>
</template>

<script type="text/ecmascript-6">
  import MusicList from '../../base/music-list/music-list.vue'
  import {mapGetters} from 'vuex'
  const ERROk = 200
  export default{
    data() {
      return {
        tracks: [],
        listName: '',
        creator: {},
        show: false
      }
    },
    created() {
      this.getSongList()
    },
    methods: {
      getSongList() {
        if (!this.playlist.id) {
          this.$router.push('/recommend')
          return
        }
        this.$ajax.get(`/playlist/detail?id=${this.playlist.id}`).then((response) => {
          if (response.data.code === ERROk) {
            this.tracks = response.data.playlist.tracks
            this.listName = response.data.playlist.name
            this.creator = response.data.playlist.creator
          }
        })
      }
    },
    computed: {
      copywriter() {
        return this.playlist.copywriter
      },
      picUrl() {
        return this.playlist.picUrl || this.playlist.coverImgUrl
      },
      name() {
        return this.playlist.name
      },
      ...mapGetters([
        'playlist'
      ])
    },
    components: {
      MusicList
    }
  }
</script>

<style>
  .slide-enter-active, .slide-leave-active {
    transition: all 0.05s linear
  }

  .slide-enter, .slide-leave-to {
    transform: translate3d(0, 100%, 0)
  }
</style>
